<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div class="lg-txt-viewer gl-scroll gl-padding" :style="{ fontSize: fontSize + 'px' }" @wheel="changeScale">
    {{ content }}
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { readFile } from '@/soar';
import { toValidValue } from '@/soar/utils/math';

interface Props {
  src: string | File;
}
const props = defineProps<Props>();

const content = ref();
const fontSize = ref(14);
watch(
  () => props.src,
  (v) => {
    if (v) {
      readFile(v).then((res) => {
        content.value = res;
      });
    }
  },
  { immediate: true },
);

function changeScale(e: any) {
  // const delta = e.wheelDelta ? e.wheelDelta : -e.deltaY;
  // if (delta > 0) {
  //   fontSize.value = toValidValue(fontSize.value + 1);
  // } else {
  //   fontSize.value = toValidValue(fontSize.value - 1);
  //   if (fontSize.value < 12) {
  //     fontSize.value = 12;
  //   }
  // }
}
</script>
<script lang="ts">
export default {
  name: 'TxtViewer',
};
</script>
<style lang="less" scoped>
.lg-txt-viewer {
  color: var(--app-color-text-primary);
  background: var(--app-color-bg-primary);
  line-height: 1.5;
}
</style>
